<template>
  <div class="tech-discussion-container">
    <div class="page-header">
      <a-card>
        <div class="header-content">
          <div class="left">
            <h2 class="title">技术交流</h2>
            <p class="description">分享技术经验，解决技术难题，共同进步</p>
          </div>
          <div class="right">
            <a-button type="primary" @click="createPost">
              <template #icon><plus-outlined /></template>
              发布帖子
            </a-button>
          </div>
        </div>
      </a-card>
    </div>

    <div class="content-container">
      <a-row :gutter="16">
        <a-col :span="18">
          <a-card class="main-content">
            <div class="filter-bar">
              <a-space>
                <a-radio-group v-model:value="sortBy" button-style="solid">
                  <a-radio-button value="latest">最新发布</a-radio-button>
                  <a-radio-button value="hot">最热门</a-radio-button>
                  <a-radio-button value="unanswered">待解决</a-radio-button>
                </a-radio-group>
                <a-input-search
                  v-model:value="searchText"
                  placeholder="搜索技术帖子"
                  style="width: 250px"
                  @search="onSearch"
                />
              </a-space>
            </div>

            <a-list
              :data-source="posts"
              :loading="loading"
              :pagination="pagination"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-card class="post-card hover-shadow" :bordered="false">
                    <template #title>
                      <div class="post-header">
                        <router-link :to="`/post/${item.id}`" class="post-title">
                          {{ item.title }}
                        </router-link>
                        <a-tag v-if="item.solved" color="success">已解决</a-tag>
                      </div>
                    </template>
                    <div class="post-content">{{ item.content }}</div>
                    <div class="post-meta">
                      <a-space>
                        <a-avatar :src="item.author.avatar" :size="24" />
                        <span class="author">{{ item.author.name }}</span>
                        <span class="time">{{ item.createTime }}</span>
                        <span><eye-outlined /> {{ item.views }}</span>
                        <span><message-outlined /> {{ item.comments }}</span>
                        <span><like-outlined /> {{ item.likes }}</span>
                      </a-space>
                      <div class="tags">
                        <a-tag v-for="tag in item.tags" :key="tag">{{ tag }}</a-tag>
                      </div>
                    </div>
                  </a-card>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <a-col :span="6">
          <a-card title="热门标签" class="side-card">
            <template #extra><a>更多</a></template>
            <div class="tag-cloud">
              <a-tag 
                v-for="tag in hotTags" 
                :key="tag.name"
                :color="tag.color"
                style="margin-bottom: 8px; cursor: pointer;"
                @click="filterByTag(tag.name)"
              >
                {{ tag.name }} ({{ tag.count }})
              </a-tag>
            </div>
          </a-card>

          <a-card title="活跃用户" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="activeUsers" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar :src="item.avatar" />
                    </template>
                    <template #title>
                      <a>{{ item.name }}</a>
                    </template>
                    <template #description>
                      发帖 {{ item.posts }} · 获赞 {{ item.likes }}
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  PlusOutlined,
  EyeOutlined,
  MessageOutlined,
  LikeOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const loading = ref(false)
const searchText = ref('')
const sortBy = ref('latest')

// 模拟数据
const posts = ref([
  {
    id: 1,
    title: 'Vue3 + TypeScript 最佳实践分享',
    content: '基于实际项目经验，分享Vue3和TypeScript的最佳实践和常见陷阱...',
    author: {
      name: '技术达人',
      avatar: 'https://joeschmoe.io/api/v1/random'
    },
    createTime: '2024-01-20 10:00',
    views: 156,
    comments: 23,
    likes: 45,
    solved: true,
    tags: ['Vue3', 'TypeScript', '最佳实践']
  },
  // 更多帖子数据...
])

const hotTags = [
  { name: 'JavaScript', count: 328, color: '#1890ff' },
  { name: 'Vue3', count: 256, color: '#52c41a' },
  { name: 'React', count: 198, color: '#722ed1' },
  { name: 'TypeScript', count: 167, color: '#faad14' },
  { name: 'Node.js', count: 145, color: '#13c2c2' }
]

const activeUsers = [
  {
    name: '技术达人',
    avatar: 'https://joeschmoe.io/api/v1/random',
    posts: 56,
    likes: 328
  },
  // 更多用户数据...
]

const pagination = {
  pageSize: 10,
  total: 100,
  current: 1,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 篇帖子`
}

// 创建帖子
const createPost = () => {
  router.push('/create-post')
}

// 搜索
const onSearch = (value) => {
  console.log('search:', value)
}

// 按标签筛选
const filterByTag = (tag) => {
  console.log('filter by tag:', tag)
}
</script>

<style lang="scss" scoped>
.tech-discussion-container {
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
  padding-top: 24px;

  .page-header {
    margin-bottom: 24px;
    padding: 0 24px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .title {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
          background: linear-gradient(45deg, #1890ff, #722ed1);
          -webkit-background-clip: text;
          color: transparent;
        }

        .description {
          margin: 8px 0 0;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .content-container {
    padding: 0 24px;
    max-width: 1400px;
    margin: 0 auto;

    .main-content {
      margin-bottom: 24px;

      .filter-bar {
        margin-bottom: 16px;
      }

      .post-card {
        width: 100%;
        margin-bottom: 16px;
        transition: all 0.3s ease;

        .post-header {
          display: flex;
          align-items: center;
          gap: 8px;

          .post-title {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size: 16px;

            &:hover {
              color: #1890ff;
            }
          }
        }

        .post-content {
          margin: 8px 0;
          color: rgba(0, 0, 0, 0.45);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .post-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;

          .author {
            color: rgba(0, 0, 0, 0.65);
            font-weight: 500;
          }

          .time {
            color: rgba(0, 0, 0, 0.45);
          }

          .tags {
            display: flex;
            gap: 8px;
          }
        }
      }
    }

    .side-card {
      margin-bottom: 16px;

      .tag-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }
  }
}
</style> 